@status-bar-height: @ui-padding*1.75;
@status-bar-padding: @ui-padding;

.status-bar {
  font-size: @ui-size;
  height: @status-bar-height;
  line-height: @status-bar-height;

  .flexbox-repaint-hack {
    padding: 0 @status-bar-padding/2;
    background-color: hsla(241, 3%, 54%, 0.3);
  }

  .inline-block {
    margin-right: @status-bar-padding;
    vertical-align: top;
  }

  .status-bar-right {
    .inline-block {
      margin-right: 0;
      margin-left: @status-bar-padding;
      & > .inline-block {
        margin-left: 0;
      }
    }
    .icon {
      margin-right: @status-bar-padding/8;
    }
  }

  .icon::before {
    font-size: 16px; // keeps them sharp
  	width: 16px;
    height: 16px;
  }
}
